<script setup lang="ts">
import { Ref, onMounted, ref } from "vue";
import { goBack} from "@/util/go"
import {baseUrl} from "@/api/http"
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";

interface vneue {
	id: number,
	description: string,
	history: string,
	file:ossFile[]
}

interface ossFile {
	url: string,
	fileType: string
}


const venueDetail:Ref<vneue> = ref({
	id: 0,
	description: "",
	history:"",
	file:[]
})

const init = async () => {
	uni.getStorage({
		key: "vneue",
		success: (data) => {
			console.log(data.data)
			venueDetail.value = data.data as vneue
		}
	})
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))


init()
</script>

<template>
<view class="page">
	
	<view class="header">
		<view class="left-icon" @click="goBack">
			<uni-icons type="left" size="20" />
		</view>
		
		<view class="title">
			<text>场景详情</text>
		</view>
		
		<view>
			
		</view>
	</view>
	
	<view class="venue-detail">
		
		<swiper class="slider" >
			
			<swiper-item class="slider-item" v-for="i in venueDetail.file" >
				<image :src="baseUrl + i.url" />
			</swiper-item>
			
		</swiper>
		
		<view class="info">
			
			<view class="card">
				
				<view class="title">
					<uni-icons type="info" size="20" style="margin-right: 10px;" />
					<text>场景简介</text>
				</view>
				
				<view class="content">
					<text>{{venueDetail.description}}</text>
				</view>
				
			</view>
			
			<view class="card">
				
				<view class="title">
					<uni-icons type="chatboxes" size="20" style="margin-right: 10px;" />
					<text>场景历史</text>
				</view>
				
				<view class="content">
					<text>{{venueDetail.history}}</text>
				</view>
				
			</view>
			

			

			

		</view>
		
	</view>
	
	
	
</view>
</template>

<style scoped lang="scss">
.page {
	
	.card {
		
		.title {
			color: 33333;
			font-size: 30rpx;
			display: flex;
			align-items: center;
		}
		
		.content {
			margin-top: 20rpx;
			font-size: 22rpx;
		}
		
		width: 90%;
		padding: 20rpx;
		border-radius: 10px;
		
		margin: 20rpx auto;
		box-shadow: #f1f1f1 1px 1px 10px;
		background-color: white;
	}
	
	.slider {
		.slider-item {
			
			image {
				width: 100%;
				height: 100%;
			}
			width: 100%;
			height: 100%;
		}
		
		width: 100%;
		height: 300px;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		padding-bottom: 20rpx;
	}
	padding: 100rpx 0;
	background-color: #f7f7f7;
	height: 87vh;
}
</style>
